<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '使用规则',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full home-container">
      <wd-navbar>
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">使用规则</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 p-y-32 home-content">
        <view
          class="font-size-28 text-gray-666 font-400 line-h-40 mg-b-32 text-left"
          v-for="(item, index) in ruleTexts"
          :key="index"
        >
          <text class="font-size-28 font-400 text-blue-1 mg-l--14">{{ item.title }}</text>
          <text>{{ item.content }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'ShareRule',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const ruleTexts: any = ref([
  {
    title: '【订单状态】',
    content:
      '分享赚的用户下单后有三个规则，这里是说明说明说明说明说明说明这里是说明说明说明说明说明说明这里是说明说明说明说明说明说明这里是说明说明说明说明说明说明。',
  },
  {
    title: '【违规操作】',
    content:
      '这里是违规操作说明这里是违规操作说明这里是违规操作说明这里是违规操作说明这里是违规操作说明这里是违规操作说明。',
  },
  {
    title: '【不可抗力】',
    content: '如出现不可抗力因素不可抗力因素不可抗力因素不可抗力因素不可抗力因素。',
  },
  {
    title: '【解释权】',
    content: '如出现不可抗力因素不可抗力因素不可抗力因素不可抗力因素不可抗力因素。',
  },
  {
    title: '【客服微信】',
    content: '12143546456',
  },
])
const pagesBack = () => {
  uni.navigateTo({
    url: '/pages/person/shareMoney',
  })
}
onLoad(() => {})
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
</style>
